// @ts-nocheck
import {useState, useRef} from 'react';
import {Button, message, Menu, Dropdown, Space, Popconfirm as Confirm} from 'antd'
import ProTable from '@ant-design/pro-table'
import {PageHeaderWrapper} from '@ant-design/pro-layout';
import {getContractInfo, accountEffective, accountKick} from '@/services/contract'
import {DownOutlined} from "@ant-design/icons";
import {useModel, Access} from 'umi'
import {authority, state} from "@/tools/tool";
import ContractDetail from "@/pages/Business/Contract/extra/contractDetail";
import ModifyPassword from "@/pages/Business/Contract/extra/modifyPassword";
import Transfer from "@/pages/Business/Contract/extra/transfer";
import RenewContract from "@/pages/Business/Contract/extra/renewContract";
import GiftDuration from "@/pages/Business/Contract/extra/giftDuration";

const Index = () => {
  const actionRef = useRef()
  const init = useModel('@@initialState');
  const [detailVisible, setDetail] = useState(false)
  const [data, setData] = useState({})
  const {currentUser} = init.initialState
  const [passVisible, setPass] = useState(false)
  const [moveVisible, setMove] = useState(false)
  const [renew, setRenew] = useState(false)
  const [giveVisible, setGive] = useState(false)
  const menu = (rowData: any) => (
    <Menu
      items={[
        {
          key: '1',
          label: (
            <Access key={'1'} accessible={authority('46', currentUser.operation)}>
              <a onClick={() => {
                setRenew(true);
                setData(rowData)
              }}>
                用户续费
              </a>
            </Access>
          ),
        },
        {
          key: '2',
          label: (
            <Access key={'2'} accessible={authority('47', currentUser.operation)}>
              <a onClick={() => {
                setData(rowData);
                setMove(true)
              }}>
                地址迁移
              </a>
            </Access>
          ),
        },
        {
          key: '3',
          label: (
            <Access key={'3'} accessible={authority('50', currentUser.operation)}>
              <Confirm
                title="确认下线吗?"
                okText="确认"
                onConfirm={() => accountKick({account_number: rowData.account_number}).then(res => {
                  if (res.status === 200) {
                    message.success(res.message).then()
                    actionRef.current.reload()
                  } else {
                    message.error('下线失败！').then()
                  }
                })}
                cancelText="取消"
              >
                <a>
                  账号下线
                </a>
              </Confirm>
            </Access>
          ),
        },
        {
          key: '4',
          label: (
            <Access key={'4'} accessible={authority('48', currentUser.operation)}>
              <Confirm
                title="确认生效吗?"
                okText="确认"
                onConfirm={() => accountEffective({
                  contract_id: rowData.contract_id,
                  account_number: rowData.account_number,
                  account_password: rowData.account_password,
                  service_package: rowData.service_package,
                  end_date: rowData.end_date
                }).then(res => {
                  if (res.status === 200) {
                    message.success(res.message).then()
                    actionRef.current.reload()
                  } else {
                    message.error('生效失败！').then()
                  }
                })}
                cancelText="取消"
              >
                <a>
                  账号生效
                </a>
              </Confirm>
            </Access>
          ),
        },
        {
          key: '5',
          label: (
            <Access key={'5'} accessible={authority('49', currentUser.operation)}>
              <a onClick={() => {
                setData(rowData);
                setPass(true)
              }}>
                密码变更
              </a>
            </Access>
          ),
        },
        {
          key: '6',
          label: (
            <Access key={'6'} accessible={authority('54', currentUser.operation)}>
              <a onClick={() => {
                setData(rowData);
                setGive(true)
              }}>
                赠送时长
              </a>
            </Access>
          ),
        },
      ]}
    />
  );
  const columns = [
    {
      dataIndex: 'account_number',
      title: '用户账号',
      width: 100
    },
    {
      dataIndex: 'linkman',
      title: '联系人',
      width: 100,
      ellipsis: true,
    },
    {
      dataIndex: 'link_telephone',
      title: '联系电话',
      width: 100
    },
    {
      dataIndex: 'install_address',
      title: '通信地址',
      width: 300,
      ellipsis: true,
    },
    {
      dataIndex: 'package_name',
      title: '服务套餐',
      hideInSearch: true,
      width: '10%'
    },
    {
      dataIndex: 'end_date',
      title: '结束时间',
      hideInSearch: true,
      width: '20%',
      valueType: 'date'
    },
    {
      dataIndex: 'state',
      title: '状态',
      hideInSearch: true,
      width: 80,
      render: (text) => state(text)
    },
    {
      title: '操作',
      fixed: 'right',
      valueType: 'option',
      width: 150,
      render: (_: any, row: any) => [
        <Access key={'1'} accessible={authority('52', currentUser.operation)}>
          <a onClick={() => {
            setDetail(true)
            setData(row)
          }}>详情</a>
        </Access>,
        <Dropdown key={'2'} overlay={menu(row)}>
          <a onClick={e => e.preventDefault()}>
            <Space>
              更多
              <DownOutlined/>
            </Space>
          </a>
        </Dropdown>
      ]
    }

  ]

  return (
    <PageHeaderWrapper>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        request={(params) => getContractInfo(params)}
      />
      <ContractDetail
        visible={detailVisible}
        data={data}
        onCancel={() => {
          setDetail(false)
          setData({})
        }}
      />
      <ModifyPassword
        data={data}
        visible={passVisible}
        onClose={() => setPass(false)}
        onOk={() => {
          setPass(false);
          actionRef.current.reload()
        }}
      />
      <Transfer
        data={data}
        visible={moveVisible}
        onClose={() => setMove(false)}
        onOk={() => {
          setMove(false);
          actionRef.current.reload()
        }}
      />
      <RenewContract
        visible={renew}
        data={data}
        onClose={() => {
          setRenew(false)
          actionRef.current.reload()
        }}
        onOk={() => {
          setRenew(false)
        }}
      />
      <GiftDuration
        data={data}
        visible={giveVisible}
        onClose={() => setGive(false)}
        onOk={() => {
          setGive(false);
          actionRef.current.reload()
        }}
      />
    </PageHeaderWrapper>
  );
};

export default Index;
